<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
	content="text/html; charset=charset=utf-8">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="fileinput/css/fileinput.css">

<title>后台管理</title>
</head>
<body>
	<div class="navbar navbar-default">
		<div class="container">
			<div class="navbar-header">
				<img alt="" src="img/logo.GIF">
			</div>
			<ul class="nav navbar navbar-right">
				<li><a href="#">我的</a></li>
				<li><a href="index">前台</a></li>
			</ul>
		</div>
	</div>

	<div class="container">
		<div class="row">

			<ul class="nav nav-tabs">
				<li class="active"><a href="#vocabulary" data-toggle="tab">单词管理</a>
				</li>
				<li><a href="#practice" data-toggle="tab">练习管理</a></li>
				<li><a href="#noval" data-toggle="tab">小说管理</a></li>
			</ul>


			<div class="tab-content" style="padding: 10px;">
				<!-- --------------------------修改单词的弹出框------------------- -->
				<!--修改新增 弹出框 -->
				<div class="modal" tabindex="-1" id="vocalmodal">
					<!--窗口声明-->
					<div class="modal-dialog">
						<!--内容声明-->
						<div class="modal-content">
							<!--头部-->
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">
									<span>&times;</span>
								</button>
								<h4 class="modal-title">单词新增</h4>
							</div>
							<!--主体-->
							<div class="modal-body">
								<form action="addvaca" id="vocalform">
									<div class="form-group">
										<label class="pull-left">单词:</label> <input
											class="form-control" type="text" placeholder="单词:"
											name="englishmean" />
									</div>
									<div class="form-group">
										<label class="pull-left">中文意思:</label> <input
											class="form-control" type="text" placeholder="中文意思:"
											name="chinesemean" />
									</div>
								</form>
							</div>
							<!--注脚-->
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" id="newvocal">新增</button>
							</div>
						</div>
					</div>
				</div>

				<!-- --------------------------上传练习题的弹出框------------------- -->
				<!--修改新增 弹出框 -->
				<div class="modal" tabindex="-1" id="practicemodal">
					<!--窗口声明-->
					<div class="modal-dialog">
						<!--内容声明-->
						<div class="modal-content">
							<!--头部-->
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">
									<span>&times;</span>
								</button>
								<h4 class="modal-title">练习新增</h4>
							</div>
							<!--主体-->
							<div class="modal-body">
								<form action="addpractice" id="practiceform"
									enctype="multipart/form-data" method="post">
									<div class="form-group">
										<label class="pull-left">试卷题目:</label> <input
											class="form-control" type="text" placeholder="试卷题目:"
											name="title" />
									</div>
									<div class="form-group">
										<label class="pull-left">所属主题:</label> <input
											class="form-control" type="text" placeholder="所属主题:"
											name="topic" />
									</div>
									<div class="form-group">
										<label class="pull-left">上传试卷内容:</label> <input
											class="form-control projectfile" type="file"
											placeholder="所属试卷内容:" name="file" />
									</div>
									<input type="submit">
								</form>
							</div>
							<!--注脚-->
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" id="newpractice">新增</button>
							</div>
						</div>
					</div>
				</div>

				<!-- --------------------------上传小说的弹出框------------------- -->
				<!--修改新增 弹出框 -->
				<div class="modal" tabindex="-1" id="novalmodal">
					<!--窗口声明-->
					<div class="modal-dialog">
						<!--内容声明-->
						<div class="modal-content">
							<!--头部-->
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">
									<span>&times;</span>
								</button>
								<h4 class="modal-title">练习新增</h4>
							</div>
							<!--主体-->
							<div class="modal-body">
								<form action="addnoval" id="practiceform" enctype="multipart/form-data"
									method="post">
									<div class="form-group">
										<label class="pull-left">小说题目:</label> <input
											class="form-control" type="text" placeholder="小说题目:"
											name="title" />
									</div>
									<div class="form-group">
										<label class="pull-left">小说作者:</label> <input
											class="form-control" type="text" placeholder="小说作者:"
											name="author" />
									</div>
									<div class="form-group" >
										<label class="pull-left">发布时间:</label> <input
											class="form-control" type="datetime" placeholder="发布时间:"
											name="publictime" />
									</div>
									
									<input type="submit" id="publishtime">
								</form>
							</div>
							<!--注脚-->
							<div class="modal-footer">
								<button type="button" class="btn btn-primary pull-left" id="newchapter">新增章节</button>
								<button type="button" class="btn btn-primary" id="newnoval">提交</button>
							</div>
						</div>
					</div>
				</div>

				<div class="tab-pane active" id="vocabulary">

					<div class="panel panel-default">
						<div class="panel-heading">
							单词分页管理
							<button class="btn btn-default pull-right" id="openvocalmodal">新增</button>
						</div>
						<div class="panel-body">
							<table class="table" id="vocal">
								<thead>
									<tr>
										<th>单词</th>
										<th>中文意思</th>
										<th>图片</th>
										<th>发音</th>
										<th>操作</th>
									</tr>
								</thead>
								<tr flag="template">
									<th colname="englishmean"></th>
									<th colname="chinesemean"></th>
									<th></th>
									<th></th>
									<th colname="op"></th>
								</tr>
							</table>
						</div>
					</div>

				</div>
				<div class="tab-pane" id="practice">
					<div class="panel panel-default">
						<div class="panel-heading">
							练习题管理
							<button class="btn btn-default pull-right" id="openpracticemodal">新增</button>
						</div>
						<div class="panel-body">
							<table class="table">
								<thead>
									<tr>
										<th>单词 </th>
										<th>中文意思</th>
										<th>图片</th>
										<th>发音</th>
									</tr>
								</thead>
								<tr flag="template">
									<th colname="englishmean"></th>
									<th colname="chinesemean"></th>
									<th></th>
									<th></th>
								</tr>
							</table>
						</div>
					</div>
				</div>
				<div class="tab-pane" id="noval">
					<div class="panel panel-default">
						<div class="panel-heading">
							练习题管理
							<button class="btn btn-default pull-right" id="opennovalmodal">新增</button>
						</div>
						<div class="panel-body">
							<table class="table">
								<thead>
									<tr>
										<th>单词</th>
										<th>中文意思</th>
										<th>图片</th>
										<th>发音</th>
									</tr>
								</thead>
								<tr flag="template">
									<th colname="englishmean"></th>
									<th colname="chinesemean"></th>
									<th></th>
									<th></th>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
	<script src="bootstrap/js/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="fileinput/js/fileinput.js"></script>
	<script type="text/javascript">
	function deleteself(id){
		$.ajax({
			type : "post",
			dataType : "json",
			url : "deletevoca",
			data : {'id':id},
			success : function(msg) {
				alert(msg.result)
			}
		});
		
	}
		/*  $.fn.serializeObject = function() {  
		        var o = {};  
		        var a = this.serializeArray();  
		        $.each(a, function() {  
		            if (o[this.name]) {  
		                if (!o[this.name].push) {  
		                    o[this.name] = [ o[this.name] ];  
		                }  
		                o[this.name].push(this.value || '');  
		            } else {  
		                o[this.name] = this.value || '';  
		            }  
		        });  
		        return o;  
		    }  */

		$(function() {
			//打开新增单词modal
			$("#openvocalmodal").click(function() {
				$('#vocalmodal').modal({
					show : true,
					backdrop : false,
					keyboard : false
				});
			})
			//打开新增练习题modal
			$("#openpracticemodal").click(function() {
				$('#practicemodal').modal({
					show : true,
					backdrop : false,
					keyboard : false
				});
			})
			//打开新增练习题modal
			$("#opennovalmodal").click(function() {
				$('#novalmodal').modal({
					show : true,
					backdrop : false,
					keyboard : false
				});
			})
			//新增单词
			$("#newvocal").click(function() {
				var formdata = $("#vocalform").serialize();

				$.ajax({
					type : "post",
					dataType : "json",
					url : "addvaca",
					data : formdata,
					success : function(msg) {
						alert(msg.result)
					}
				});
			})
			//新增单词
			$("#newpractice").click(function() {
				var formdata = $("#practiceform").serialize();

				$.ajax({
					type : "post",
					dataType : "json",
					url : "addpractice",
					data : formdata,
					success : function(msg) {
						alert(msg.result)
					}
				});
			})
			//新增小说
			$("#newnoval").click(function() {
				var formdata = $("#practiceform").serialize();

				$.ajax({
					type : "post",
					dataType : "json",
					url : "addpractice",
					data : formdata,
					success : function(msg) {
						alert(msg.result)
					}
				});
			})
			
			/* <div class="form-group" id="temp">
										<label class="pull-left">第一章 章节名:</label> <input
											class="form-control" type="text" placeholder="章节内容:"
											name="topic" /> <label class="pull-left">上传章节内容:</label> <input
											class="form-control projectfile" type="file"
											placeholder="所属试卷内容:" name="file" />
									</div> */
			
			//新增练习题modal
			$("#newchapter").click(function() {
				var i=index++;
				var appchpt=
				"<div class='form-group'><label class='pull-left'>第"+i+"章 章节名:</label> <input "+ 
				"class='form-control' type='text' placeholder='章节名:'+ name='chaptername"+i+"' /> <label "+
				"class='pull-left'>上传章节内容:</label> <input class='form-control projectfile' type='file'"+
					"placeholder='章节内容:' name='files' /></div>";
				$("#publishtime").before(appchpt);	
					
			})
			var index=0;
			//显示表格内容
			$.ajax({
				dataType : "json",
				url : "showvocal",
				success : function(msg) {
					var result = msg.page.list;
					//alert(result[0][str]);
					//alert(result[0].englishmean);
					var currtable = $("#vocal");
					var currtr = $("#vocal tr[flag='template']");//获取模板一行 tr

					for (var x = 0; x < result.length; x++) {
						var temptr = $(currtr).clone();//clone 一行
						$.each(temptr.children(), function(i) {
							var colname = $(this).attr('colname');
							var id;
							var html;
							if(colname=='op'){
								id = result[x]['id'];
								//<button class="btn btn-default" onclick="deleteself()"></button>
								html='<button class="btn btn-default" onclick="deleteself('+id+')">删除</button>';
								$(this).html(html);
							}else{
								html = result[x][colname];
								if (html) {
									$(this).html(html);
								}
							}
							
						})

						//将模板贴到表尾
						currtable.append(temptr);

					}

					$(currtr).remove();

				}
			});

		})
	</script>
</body>
</html>